<template>
    <div class="products" :class="[props.layout||'c2']">
        <div v-for="product in props.products" :key="product.id">
            <div class="imageContaier">
                <van-image
                        height="150"
                        :src="product.coverImage"
                />
            </div>
            <div class="fontsize text-one-row-overflow margin-top-bottom-5">{{product.name}}</div>
            <div class="space-between ">
                <div>
                    <div class="fontsize">￥{{product.price}}</div>
                    <div class="sub-small grey line-through">￥{{product.maxPrice}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import {createProp} from "../../util/util";

    export default {
        props: {
            props: createProp([Object])
        },
        data() {
            return {
                form: {
                    table: [],
                    from: 0,
                    tableLoading: false,
                    total: 0,
                },

            }
        }
    }
</script>
<style lang="scss" scoped>
    .products.c2 {
        padding-left: 5px;
        padding-right: 5px;
        display: flex;
        flex-wrap: wrap;

        & > div {
            box-sizing: border-box;
            width: calc(50%);

            &:nth-child(2n) {
                padding-left: 5px;
            }

            &:nth-child(2n+1) {
                padding-right: 5px;

            }
        }
    }

    .imageContaier {
        height: 150px;

        img {
            max-width: 100%;
            max-height: 100%;
        }
    }
</style>

